/**
 * 条件渲染
 * v-if v-else-if v-else
 * v-show
 * 
 * 称之为 【指令】 -> v-if="指令表达式"
 * 指令表达式 返回 truthy -> 渲染
 * 
 * v-show 是由 style/display 控制 -> 都会渲染 -> none/block 控制显隐
 * 
 * 等价于 
 * if (表达式) {
 * } else if (表达式) {
 * } else {}
 */

import { createApp } from 'vue/dist/vue.esm-bundler'

var App = {
  data() {
    return {
      list: [],
      // loading -> 获取数据 -> 没有数据（No Data）
      // -> 有数据 -> 赋值的list
      listStatus: 'loading',
      username: 'wgf',
      isLogin: true,
      myListShow: true
    }
  },
  // mounted() {
  //   const random = Math.random()
  //   console.log(random)

  //   setTimeout(() => {
  //     if (random <= 0.5) {
  //       this.list = [
  //         {
  //           id: 1,
  //           title: 'wgf'
  //         },
  //         {
  //           id: 2,
  //           title: 'er'
  //         }
  //       ]
  //       this.listStatus = 'show'
  //     } else {
  //       this.listStatus = 'noData'
  //     }
  //   },)
  // },
  // template: `
  //   <table border="1" width="300" align="center">
  //     <thead>
  //       <tr>
  //         <th>ID</th>
  //         <th>Username</th>
  //       </tr>
  //     </thead>
  //     <!-- v-if v-else-if v-else 结构上必须紧挨 -->
  //     <tbody align="center" v-if="listStatus === 'loading'">
  //       <tr>
  //         <td colspan="2">loading...</td>
  //       </tr>
  //     </tbody>
  //     <tbody align="center" v-else-if="listStatus === 'noData'">
  //       <tr>
  //         <td colspan="2">No DATA</td>
  //       </tr>
  //     </tbody>
  //     <tbody align="center" v-else>
  //       <tr v-for="item of list" :key="item.id">
  //         <td>{{ item.id }}</td>
  //         <td>{{ item.title }}</td>
  //       </tr>
  //     </tbody>
  //   </table>
  // `

  template: `
    <div>
      <div class="user">
      <!-- 当没有根节点，采取 内置提供的 template 标签 -->
        <template v-if="isLogin">
          <span>Welcome, {{ username }}</span>
          <div>
            <a href="javascript:;" @click="showMyList">个人中心</a>
            <ul v-show="myListShow">
              <li>
                <a href="#">我的资料</a>
              </li>
              <li>
                <a href="#">我的账户</a>
              </li>
              <li>
                <a href="#">我的钱包</a>
              </li>
            </ul>
          </div>
        </template>
        <template v-else>
          <a href="#"> 登录</a>
          <a href="#"> 注册</a>
        </template>
      </div>
    </div>
  `,
  methods: {
    showMyList() {
      this.myListShow = !this.myListShow
    }
  }
}

const app = createApp(App)
app.mount('#app')

/**
 * v-if 是对 DOM 的移除和添加，在移除的时候用注释节点占位
 *      对内部的子组件与事件监听都会销毁与重建
 * 
 * v-if 只有条件是 truthy 的时候，才会被渲染（惰性渲染）
 * v-show 总是会被渲染，用 display 来控制其显示与隐藏
 * 
 * v-if 在切换的时候会提高开销，如果条件为假值，初始化渲染是不会进行消耗
 * v-show 在切换开销低，但是初始化渲染时必会消耗性能
 * 
 * 切换频繁用 v-show, 反之用 v-if
 */
